﻿<html lang="zh-cn">
<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta charset="utf-8"/>
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no" media="screen"/>
    <title>网上聊天</title>
    <link rel="stylesheet" href="/chat/css/webIM.css">
    <link rel="stylesheet" href="/chat/css/font-awesome.css">
    <script type="text/javascript" src="/chat/js/sockjs.min.js"></script>
    <script type="text/javascript" src="/chat/js/stomp.js"></script>
<#--异步上传图片-->
    <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="/js/ajaxfileupload.js"></script>
    <#--<script src="http://app.cloopen.com/im50/ytx-web-im-min-new.js"></script>-->
    <script src="https://app.cloopen.com/im50/ytx-web-im-min-new.js"></script>
    <style>

        .weui-btn {
            position: relative;
            display: block;
            float: left;
            margin-left: auto;
            margin-right: auto;
            padding-left: 14px;
            padding-right: 14px;
            box-sizing: border-box;
            font-size: 18px;
            text-align: center;
            text-decoration: none;
            color: #fff;
            line-height: 2.55555556;
            border-radius: 5px;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            overflow: hidden;
        }
        .weui-btn_primary {
            background-color: #1aad19;
        }
        .weui-textarea {
            display: block;
            border: 0;
            resize: none;
            width: 82%;
            color: inherit;
            font-size: 1em;
            line-height: inherit;
            outline: 0;
            float: left;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .layui-btn+.layui-btn {
            margin-left: 10px;
        }
        .layui-btn-normal {
            background-color: #1E9FFF;
        }
        .layui-btn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
        .layui-btn, .layui-input, .layui-select, .layui-textarea, .layui-upload-button {
            outline: 0;
            -webkit-appearance: none;
            transition: all .3s;
            -webkit-transition: all .3s;
            box-sizing: border-box;
        }
        .layui-btn, .layui-edge, .layui-inline, img {
            vertical-align: middle;
        }
        button, input, optgroup, option, select, textarea {
            font-family: inherit;
            font-size: inherit;
            font-style: inherit;
            font-weight: inherit;
            outline: 0;
        }

    </style>
</head>
<body>

<div class="box_bj" style="width:100%;margin:0 auto">


    <div class="box_bj" style="width:100%;float:left;height: 100%;">

        <div class="webIM_header">
            <div>${fname!""}</div>
        </div>

        <div class="speak_window" id="IM_height">

            <div class="speak_box">

            </div>
        </div>

        <div style="height: 20%;">
            <div class="webIM_anniu">
                <span class="fa fa-picture-o" id="upload" onclick="tanchu();"></span>
                <span class="fa fa-camera-retro" id="takehoto" onclick="tanchureadyPhoto();"></span>
                <span class="fa fa-video-camera" id="takehoto" onclick="takeVideo();"></span>

            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea id="textarea" class="weui-textarea"
                              style="background-color: #eeeeee;height: 55px" rows="3"></textarea>
                </div>
                <a href="javascript:void(0)" onclick="textMessage();" class="weui-btn weui-btn_primary">发送</a>
            </div>

        </div>


    </div>
</div>
<#--<div id="takePic">
    <video width="300" height="300" id="picshow" autoplay="" controls src=""></video>
    <button id="snap" onclick="takePhoto();">拍照</button>
    <span id="snapCancle">取消</span>
</div>-->

<video class="video_long_distance" data-video="distance" autoplay controls></video>
<video class="video_local" data-video="local"  autoplay muted controls></video>

<div class="video_view" data-video-with="0" data-call-state="1" data-call-type="1">

    <p class="video_bottom">
        <span class="hangup" data-btn="cancelVideo">取消</span>
        <span class="hangup" data-silence="false">关闭麦克风</span>
        <span class="hangup" data-camera="false">关闭摄像头</span>
    </p>
</div>
</body>
<script type="text/javascript">
    var appid="${appid!""}";
    var sig="${sig!""}";
    var uid="${uid!""}";
    var fid="${fid!""}";
    var timestamp="${timestamp!""}";
    var headImage="${headImage!""}";
    var fheadImage="${fheadImage!""}"
</script>
<script type="text/javascript" src="/layer-v3.1.0/layer/mobile/layer.js"></script>
<script>
    document.onkeydown = cdk;
    function cdk() {
        if (event.keyCode == 13) {
            textMessage();
        }
    }

</script>
<script type="text/javascript" src="/chat/js/news.js"></script>

<script type="text/javascript">
    //弹出一个页面层
   function tanchu(){
        layer.open({
            type: 1,
            area: ['800px', '360px'],
            btn: ['确定','取消'],
            yes:function(){
                sendphotoMessage(layer);
            },
            title: ['选择图片', 'font-size:18px;'],
            shadeClose: true, //点击遮罩关闭
            content: '<div style="padding-bottom:20px; width: 300px;"align="center">' +
            '<a href="javascript:;"  class="file">选择文件' +
            '    <input type="file" name="file" id="file">' +
            '</a>' +
            '</div>'
        }
        );
    };

    //是否拍照
   function tanchureadyPhoto(){
       layer.open({
           type: 1,
           title: false,
           closeBtn: 0,
           shadeClose: true,
           skin: 'yourclass',
           content: '<div style="padding-bottom:20px; width: 300px;padding-top: 20px"align="center">' +
           '<a href="javascript:tanchuTakePhoto();"  class="file">开始拍照' +
           '</a>' +
           '</div>'
       });

   }
   //开始拍照
    function tanchuTakePhoto(){
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            skin: 'yourclass',
            content: '<div id="takePic">' +
            '<video width="300" height="300" id="picshow" autoplay="" controls src=""></video><br>' +
            '<button id="snap" class="layui-btn layui-btn-normal" onclick="takePhoto();">拍照</button>' +
            '<button id="snapCancle" class="layui-btn layui-btn-normal" onclick="cancelTakePhoto();">取消</button>' +
            '</div>'
        });

        startPhoto(layer);
    }



</script>
</html>

